<section id="yx-detail">
  <page-tab :data="tabData" :selected-index="tabSelectedIndex" prefix="意向书管理" @on-item-click="handleSelectedTab"></page-tab>

  <div style="padding:0 24px" v-show="loadIntentModule">
    <div class="js-failMemo" v-if="data.failMemo && data.auditStatusCode == 'RJ'">{{data.failMemo}}</div>
    <div class="font-14 color-gray mt-10">意向信息</div>
    <div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">意向编号：</div>
          <div class="dy-fx-3">{{data.intentCode || '--'}}</div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">意向<span v-if="data.intentType == 'ER'">面积</span><span v-if="data.intentType == 'WR'">工位</span>：</div>
          <div class="dy-fx-3">{{data.intentAcreage || '0'}}㎡</div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-2 color-999">意向租赁期限：</div>
          <div class="dy-fx-4">{{data.intentStartDate | dateTimeYYmmDD}} 至 {{data.intentEndDate | dateTimeYYmmDD}}</div>
        </div>
      </div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">意向状态：</div>
          <div class="dy-fx-3">{{data.auditStatusVal || '--'}}</div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">意向车位：</div>
          <div class="dy-fx-3">{{data.intentParkingNum || '0'}}个</div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">意向类型：</div>
          <div class="dy-fx-3">{{data.intentType == 'ER' ? '整租' : '工位'}}</div>
        </div>
      </div>
      <div class="dy-flex mt-10" v-if="data.intentBillId || data.refundBillId">
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999" v-if="data.intentBillId">意向账单：</div>
          <div class="dy-fx-3" v-if="data.intentBillId"><a target="_blank" :href="'#/billDetail?id='+data.intentBillId+'&aid=undefined&page=billList&ddtab=true'">{{data.intentBillNo
              || '--'}}</a></div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999" v-if="data.refundBillId">退款账单：</div>
          <div class="dy-fx-3" v-if="data.refundBillId"><a target="_blank" :href="'#/billEdit?id='+data.refundBillId+'&aid=undefined&page=billList&ddtab=true'">{{data.refundBillNo
              || '--'}}</a></div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999"></div>
          <div class="dy-fx-3"></div>
        </div>
      </div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">创建人：</div>
          <div class="dy-fx-3">
            <span>{{data.createUser || '--'}}</span>
            <span class="color-999 ml-5">({{data.createTime | dateTime}})</span>
          </div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">确认人：</div>
          <div class="dy-fx-3">
            <span>{{data.confirmUser || '--'}}</span>
            <span class="color-999 ml-5">({{data.confirmTime | dateTime}})</span>
          </div>
        </div>
        <div class="dy-fx-1 dy-flex">
          <div class="dy-fx-1 color-999">更新人：</div>
          <div class="dy-fx-3">
            <span>{{data.lastUpdateUser || '--'}}</span>
            <span class="color-999 ml-5">({{data.lastUpdateTime | dateTime}})</span>
          </div>
        </div>
      </div>

    </div>
    <div style="marginTop:20px;">
      <div class="color-gray">意向资源</div>
      <div class="mt-10" v-if="unitList.length">
        <div>单元({{unitCount}}m²)</div>
        <div class="dy-flex gradient-color line-height-40 text-center border">
          <div class="dy-fx-2">项目</div>
          <div class="dy-fx-2">楼栋</div>
          <div class="dy-fx-2">楼层</div>
          <div class="dy-fx-5">单元</div>
        </div>
        <div class="dy-flex line-height-40 text-center border-b" v-for="item in unitList">
          <div class="dy-fx-2 border-l border-r dy-center">{{item.projectName}}</div>
          <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
          <div class="dy-fx-2 border-r">{{item.floor}}</div>
          <div class="dy-fx-5 border-r text-left">
            <div class="pl-12 pr-12">
              <span v-for="(item0, index0) in item.children">{{item0.unitName}}({{item0.acreage}}m²)<span v-if="!(index0 == item.children.length-1)">、</span></span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-10" v-if="wpCount">
        <div>工位({{wpCount}}个)</div>
        <div class="dy-flex gradient-color line-height-40 text-center border">
          <div class="dy-fx-2">项目</div>
          <div class="dy-fx-2">楼栋</div>
          <div class="dy-fx-2">楼层</div>
          <div class="dy-fx-2">单元</div>
          <div class="dy-fx-2">工位数</div>
          <div class="dy-fx-5">工位</div>
        </div>
        <div class="dy-flex line-height-40 text-center border-b" v-for="item in wplist">
          <div class="dy-fx-2 border-l border-r dy-center">{{item.projectName}}</div>
          <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
          <div class="dy-fx-2 border-r">{{item.floor}}</div>
          <div class="dy-fx-2 border-r">{{item.unitName}}</div>
          <div class="dy-fx-2 border-r">{{item.children.length}}</div>
          <div class="dy-fx-5 border-r text-left">
            <div class="pl-12 pr-12">
              <span v-for="(item0, index0) in item.children">{{item0.wpName}}<span v-if="!(index0 == item.children.length-1)">、</span></span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-10" v-if="stCount">
        <div>车位({{stCount}}个)</div>
        <div class="dy-flex gradient-color line-height-40 text-center border">
          <div class="dy-fx-2">项目</div>
          <div class="dy-fx-2">楼栋</div>
          <div class="dy-fx-2">楼层</div>
          <div class="dy-fx-2">单元</div>
          <div class="dy-fx-2">车位数</div>
          <div class="dy-fx-5">车位</div>
        </div>
        <div class="dy-flex line-height-40 text-center border-b" v-for="item in stlist">
          <div class="dy-fx-2 border-l border-r dy-center">{{item.projectName}}</div>
          <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
          <div class="dy-fx-2 border-r">{{item.floor}}</div>
          <div class="dy-fx-2 border-r">{{item.unitName}}</div>
          <div class="dy-fx-2 border-r">{{item.children.length}}</div>
          <div class="dy-fx-5 border-r text-left">
            <div class="pl-12 pr-12">
              <span v-for="(item0, index0) in item.children">{{item0.stopName}}<span v-if="!(index0 == item.children.length-1)">、</span></span>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div style="marginTop: 20px;">
      <div class="line-height-34">
        <span class="color-999 mr-24">意向金金额：</span>
        <span class="color-666">{{data.intentAmount || '0'}}</span>
      </div>
      <div class="line-height-34">
        <span class="color-999 mr-24">可抵扣金额：</span>
        <span class="color-666">{{data.intentDeductibleAmount || '0'}}</span>
      </div>
      <div class="line-height-34">
        <span class="color-999 mr-24">截止付款时间：</span>
        <span class="color-666">{{data.intentPaymentDeadline | dateTimeYYmmDD}}</span>
      </div>
      <div class="dy-flex line-height-34">
        <span class="color-999 dy-fx-1">备注：</span>
        <span class="color-666 dy-fx-13">{{data.memo || '--'}}</span>
      </div>
    </div>

    <div style="marginTop: 20px;">
      <div class="color-gray">客户信息</div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">客户类型：</span>
          <span class="color-666">{{data.zlfInfo.zlfTypeVal}}</span>
        </div>
        <div class="dy-fx-1"></div>
      </div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">渠道分类：</span>
          <span class="color-666">{{data.zlfInfo.channelCategoryVal || '--'}}</span>
        </div>
        <div class="dy-fx-1">
          <span class="color-999">渠道名称：</span>
          <span class="color-666">{{data.zlfInfo.channelNameVal || '--'}}</span>
        </div>
      </div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">客户名称：</span>
          <span class="color-666">{{data.zlfInfo.zlfName || '--'}}</span>
        </div>
        <div class="dy-fx-1">
          <span class="color-999">所属行业：</span>
          <span class="color-666">{{data.zlfInfo.zlfIndustryVal || '--'}}</span>
        </div>
      </div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">纳税人识别号：</span>
          <span class="color-666">{{data.zlfInfo.idcode || '--'}}</span>
        </div>
        <div class="dy-fx-1">
          <span class="color-999"><span v-if="data.zlfInfo.zlfType == 'QY'">公司</span><span v-if="data.zlfInfo.zlfType == 'PE'">个人</span>邮箱：</span>
          <span class="color-666">{{data.zlfInfo.email || '--'}}</span>
        </div>
      </div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">公司法人：</span>
          <span class="color-666">{{data.zlfInfo.zlfSperson || '--'}}</span>
        </div>
        <div class="dy-fx-1">
          <span class="color-999">联系电话：</span>
          <span class="color-666">{{data.zlfInfo.zlfSphone || '--'}}</span>
        </div>
      </div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">合同联系人：</span>
          <span class="color-666">{{data.zlfInfo.zlfLperson || '--'}}</span>
        </div>
        <div class="dy-fx-1">
          <span class="color-999">联系电话：</span>
          <span class="color-666">{{data.zlfInfo.zlfLphone || '--'}}</span>
        </div>
      </div>
      <div class="dy-flex line-height-34">
        <div class="dy-fx-1">
          <span class="color-999">联系地址：</span>
          <span class="color-666">{{data.zlfInfo.zlfAddress || '--'}}</span>
        </div>
      </div>
    </div>
    <div class="mt-10 mb-10">
      <hl-button type="primary" @on-click="goToEdit" v-show="(data.auditStatusCode == 'CG' || data.auditStatusCode == 'RJ') && permissions.indexOf('c156') > -1 ">编辑</hl-button>
      <hl-button type="primary" @on-click="goToEdit" v-show=" data.auditStatusCode == 'GC' && permissions.indexOf('c156') > -1 ">编辑</hl-button>
      <hl-button type="primary" @on-click="ifYxBook" v-if="(data.auditStatusCode == 'CG' || data.auditStatusCode == 'RJ') && permissions.indexOf('c157') > -1">确认意向</hl-button>
      <hl-button type="primary" @on-click="refundShow" v-if="data.auditStatusCode == 'PD' && permissions.indexOf('c160') > -1">退款</hl-button>
      <hl-button type="primary" @on-click="goContract" v-if="data.auditStatusCode == 'PD' && permissions.indexOf('c159') > -1">转为合同</hl-button>
      <hl-button type="outline" @on-click="cancelYx" v-if="(data.auditStatusCode == 'CG' || data.auditStatusCode == 'RJ') && permissions.indexOf('c158') > -1">作废</hl-button>
      <hl-button type="outline" @on-click="cancelYx" v-if="data.auditStatusCode == 'CF' && permissions.indexOf('c158') > -1">作废</hl-button>
    </div>
    <div class="yx-mark" v-if="stateflag">
      <div class="yx-container">
        <div class="yx-title">确认意向</div>
        <div class="yx-close icon-Gm-close" @click="hideYx"></div>
        <div class="yx-content">
          <div class="icon-Gm-delete-2 yx-error" v-if="state"></div>
          <p class="text-center" v-if="state == 1">无法确认意向</p>
          <p class="font-12 text-center" v-if="state == 1">信息不完整，请<a :href="'#/yxEdit?id='+id">补全信息</a></p>
          <div class="yx-rent" v-if="state == 2">
            <p class="text-center font-16">无法确认意向</p>
            <p class="color-primary left-p" v-if="errData.unit">单元 {{errData.unit}}</p>
            <p class="color-primary left-p" v-if="errData.position">工位 {{errData.position}}</p>
            <p class="color-primary left-p" v-if="errData.stop">车位 {{errData.stop}}</p>
            <p>以上资源已被出租或被其他意向预定</p>
          </div>
          <div class="yx-info" v-if="state == 0">
            <p><span class="color-999">客户名称：</span>{{data.zlfInfo.zlfName || '--'}}</p>
            <p><span class="color-999">需求时间：</span>{{data.intentStartDate | dateTimeYYmmDD}} 至 {{data.intentEndDate |
              dateTimeYYmmDD}}</p>
            <p><span class="color-999">意向金：</span>{{data.intentAmount || '0'}}元</p>
            <p><span class="color-999">最晚缴纳时间：</span>{{data.intentPaymentDeadline | dateTimeYYmmDD}}</p>
          </div>
        </div>
        <div class="yx-button">
          <hl-button type="primary" @on-click="queryYx">确定</hl-button>
          <hl-button type="outline" @on-click="hideYx">取消</hl-button>
        </div>
      </div>
    </div>

    <div class="yx-mark" v-if="refundflag">
      <div class="yx-container">
        <div class="yx-title">退款</div>
        <div class="yx-close icon-Gm-close" @click="refundHide"></div>
        <div class="yx-content">
          <div class="yx-li"><span class="color-999">客户名称：</span>{{data.zlfInfo.zlfName || '--'}}</div>
          <div class="yx-li"><span class="color-999">意向时间：</span>{{data.intentStartDate | dateTimeYYmmDD}} 至
            {{data.intentEndDate | dateTimeYYmmDD}}</div>
          <div class="yx-li dy-flex" style="overflow: visible">
            <span class="color-999">退款时间：</span>
            <div style="width: 180px">
              <web-calendar type="primary" v-model="refundDate" tips="截止日期"></web-calendar>
            </div>
          </div>
          <div class="yx-li">
            <span class="color-999">退款原因：</span>
            <textarea class="form-control" rows="4" v-model="refundMome" style="width: 250px;"></textarea>
          </div>
        </div>
        <div class="yx-button">
          <hl-button type="primary" @on-click="refundYx">确定</hl-button>
          <hl-button type="outline" @on-click="refundHide">取消</hl-button>
        </div>
      </div>
    </div>
    <div class="yx-mark" v-if="tzhuanflag">
      <div class="yx-tiaozhuan">当前意向书存在有效关联合同，即将为您跳转到合同详情...</div>
    </div>
  </div>
  <!-- 凭证列表 -->
  <div style="padding:0 24px">
    <section v-show="loadVoucherModule" class="upload">
      <div class="font-16 mt-15">凭证列表</div>
        <div class="account-wrap border-r br-4 box-i-shadow overflow  mt-10">
          <div class="list-head dy-flex">
            <div class="dy-fx-1">序</div>
            <div class="dy-fx-1">会计年</div>
            <div class="dy-fx-1">会计期间</div>
            <div class="dy-fx-2">凭证日期</div>
            <div class="dy-fx-2">制单日期</div>
            <div class="dy-fx-1">凭证类别</div>
            <div class="dy-fx-1">制单人</div>
            <div class="dy-fx-1">科目编码</div>
            <div class="dy-fx-3">摘要</div>
            <div class="dy-fx-1">操作</div>
          </div>
          <div class="content_box">
            <div class="list-head br-t-n dy-flex textCenter" v-for="(item,index) in voucherList">
              <div class="dy-fx-1">{{index+1}}</div>
              <div class="dy-fx-1">{{item.voucherYear}}</div>
              <div class="dy-fx-1">{{item.voucherPeriod}}</div>
              <div class="dy-fx-2">{{item.voucherDate | dateTimeYYmmDD}}</div>
              <div class="dy-fx-2">{{item.documentingDate | dateTimeYYmmDD}}</div>
              <div class="dy-fx-1">{{item.voucherTypeVal || '--'}}</div>
              <div class="dy-fx-1">{{item.documentingUserName}}</div>
              <div class="dy-fx-1 fx-wrap">
                <div class="width-max text-center" :class="{'border-t':index0 > 0}" v-for="(item0,index0) in item.debtorANDLenderVOs">{{item0.subjectVal || '--'}}</div>
              </div>
              <div class="dy-fx-3 fx-wrap ellipsis-1">
                <div style="padding:0 5px" class="width-max text-center ellipsis-1" :class="{'border-t':index0 > 0}" v-for="(item0,index0) in item.debtorANDLenderVOs" :title="item0.summaryValue">{{item0.summaryValue || '--'}}</div>
              </div>
              <div class="dy-fx-1"><a @click="goToVoucherDetail(item.id)">详情</a></div>
            </div>
          </div>
      </div>
    </section>
  </div>
  <!-- 相关文件 -->
  <div style="padding:0 24px">
    <section v-show="loadFileModule" class="upload">
      <div class="contract-file-container mt-15">
        <div class="upload-head-contract clearfix border-b pb-10">
          <div class="pull-left font-16 line-height-34">文件列表</div>
          <hl-button class="pull-right" @on-click="uploadFile" v-if="permissions.indexOf('c92') > -1">上传文件</hl-button>
        </div>
        <div>
          <ul>
            <li class="clearfix border-b" v-for="(item,index) in attachmentsList">
              <p class="icon-Nav-contract-file file-name">
                <span>{{item.name}}</span>
              </p>
              <p class="pull-right line-height-45 file-btn dy-flex opera-but" style="align-items: center;height: 45px">
                <a class="icon-Gm-delete opera-but-first"  v-if="permissions.indexOf('c91') > -1" @click="deleteFile(item.url,index)">
                  <b>删除</b>
                </a>
                <span class="block-D-P-D" v-if="permissions.indexOf('c91') > -1"></span>
                <a  class="icon-GM-preview" @click="previewImage(item.url)">
                    <b>预览</b>
                </a>
                <span class="block-D-P-D"></span>
                <a :href="item.url" :download="item.name" class="icon-Gm-download">
                    <b>下载</b>
                </a>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
    </section>
  </div>
  <div class="upload-file-button"></div>
</section>

<script src="modules/contract/scripts/yxDetail.js" charset="utf-8"></script>

<style media="screen">
  .loadprogress{
		position: fixed;
		z-index: 999999;
		left: 0;
		bottom: 0;
		height: 20px;
		width: 500px;
		font-size: 12px;
		text-indent: 3px;
		line-height: 20px;
	}
  .yx-tiaozhuan {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
  }

  .dy-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  a.yxEdit {
    color: #fff !important;
  }

  .yx-mark {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yx-container {
    width: 650px;
    background-color: #f9f9f9;
    position: relative;
    border-radius: 4px;
  }

  .yx-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
  }

  .yx-close {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  .yx-content {
    padding: 60px 0;
  }

  .yx-error {
    text-align: center;
    font-size: 28px;
    color: #fe584c;
    margin-bottom: 18px;
  }

  p {
    line-height: 28px;
  }

  .yx-button {
    background-color: #fff;
    padding: 8px 0;
    text-align: center;
  }

  .yx-rent {
    text-align: center;
    font-size: 12px;
  }

  .yx-rent p {
    line-height: 24px;
  }

  .yx-info p {
    font-size: 14px;
    line-height: 24px;
    margin-left: 210px;
  }

  .yx-info p span {
    margin-right: 20px;
  }

  .yx-li {
    margin: 0 132px;
    color: #666;
    line-height: 34px;
    overflow: hidden;
    margin-bottom: 8px;
  }

  .yx-li span {
    float: left;
    margin-right: 15px;
  }

  .yx-li textarea {
    width: 300px;
  }

  .tab-wrap {
    /* padding: 0 24px; */
    background-color: #f7f7f7;
  }

  .tab-wrap button {
    height: 56px;
    line-height: 56px;
    padding: 0 15px;
    border: 0;
    background: 0 0;
    border-radius: 0;
  }

  .tab-wrap button.active {
    color: #5e67a5;
    border-bottom: 3px solid #5e67a5;
  }
</style>
